<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <style>
      #loading {
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .loader {
        box-sizing: border-box;
        display: flex;
        flex: 0 1 auto;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 25%;
        max-width: 25%;
        height: 200px;
        align-items: center;
        justify-content: center;
      }

      .la-pacman,
      .la-pacman > div {
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .la-pacman {
        display: block;
        font-size: 0;
        color: #d81e06;
      }

      .la-pacman.la-dark {
        color: #333;
      }

      .la-pacman > div {
        display: inline-block;
        float: none;
        background-color: currentColor;
        border: 0 solid currentColor;
      }

      .la-pacman {
        width: 32px;
        height: 32px;
      }

      .la-pacman > div:nth-child(1),
      .la-pacman > div:nth-child(2) {
        width: 0;
        height: 0;
        background: transparent;
        border-style: solid;
        border-width: 16px;
        border-right-color: transparent;
        border-radius: 100%;
        -webkit-animation: pacman-rotate-half-up 0.5s 0s infinite;
        -moz-animation: pacman-rotate-half-up 0.5s 0s infinite;
        -o-animation: pacman-rotate-half-up 0.5s 0s infinite;
        animation: pacman-rotate-half-up 0.5s 0s infinite;
      }

      .la-pacman > div:nth-child(2) {
        margin-top: -32px;
        -webkit-animation-name: pacman-rotate-half-down;
        -moz-animation-name: pacman-rotate-half-down;
        -o-animation-name: pacman-rotate-half-down;
        animation-name: pacman-rotate-half-down;
      }

      .la-pacman > div:nth-child(3),
      .la-pacman > div:nth-child(4),
      .la-pacman > div:nth-child(5),
      .la-pacman > div:nth-child(6) {
        position: absolute;
        top: 50%;
        left: 200%;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        opacity: 0;
        -webkit-animation: pacman-balls 2s 0s infinite linear;
        -moz-animation: pacman-balls 2s 0s infinite linear;
        -o-animation: pacman-balls 2s 0s infinite linear;
        animation: pacman-balls 2s 0s infinite linear;
      }

      .la-pacman > div:nth-child(3) {
        -webkit-animation-delay: -1.44s;
        -moz-animation-delay: -1.44s;
        -o-animation-delay: -1.44s;
        animation-delay: -1.44s;
      }

      .la-pacman > div:nth-child(4) {
        -webkit-animation-delay: -1.94s;
        -moz-animation-delay: -1.94s;
        -o-animation-delay: -1.94s;
        animation-delay: -1.94s;
      }

      .la-pacman > div:nth-child(5) {
        -webkit-animation-delay: -2.44s;
        -moz-animation-delay: -2.44s;
        -o-animation-delay: -2.44s;
        animation-delay: -2.44s;
      }

      .la-pacman > div:nth-child(6) {
        -webkit-animation-delay: -2.94s;
        -moz-animation-delay: -2.94s;
        -o-animation-delay: -2.94s;
        animation-delay: -2.94s;
      }

      .la-pacman.la-sm {
        width: 16px;
        height: 16px;
      }

      .la-pacman.la-sm > div:nth-child(1),
      .la-pacman.la-sm > div:nth-child(2) {
        border-width: 8px;
      }

      .la-pacman.la-sm > div:nth-child(2) {
        margin-top: -16px;
      }

      .la-pacman.la-sm > div:nth-child(3),
      .la-pacman.la-sm > div:nth-child(4),
      .la-pacman.la-sm > div:nth-child(5),
      .la-pacman.la-sm > div:nth-child(6) {
        width: 4px;
        height: 4px;
      }

      .la-pacman.la-2x {
        width: 64px;
        height: 64px;
      }

      .la-pacman.la-2x > div:nth-child(1),
      .la-pacman.la-2x > div:nth-child(2) {
        border-width: 32px;
      }

      .la-pacman.la-2x > div:nth-child(2) {
        margin-top: -64px;
      }

      .la-pacman.la-2x > div:nth-child(3),
      .la-pacman.la-2x > div:nth-child(4),
      .la-pacman.la-2x > div:nth-child(5),
      .la-pacman.la-2x > div:nth-child(6) {
        width: 16px;
        height: 16px;
      }

      .la-pacman.la-3x {
        width: 96px;
        height: 96px;
      }

      .la-pacman.la-3x > div:nth-child(1),
      .la-pacman.la-3x > div:nth-child(2) {
        border-width: 48px;
      }

      .la-pacman.la-3x > div:nth-child(2) {
        margin-top: -96px;
      }

      .la-pacman.la-3x > div:nth-child(3),
      .la-pacman.la-3x > div:nth-child(4),
      .la-pacman.la-3x > div:nth-child(5),
      .la-pacman.la-3x > div:nth-child(6) {
        width: 24px;
        height: 24px;
      }

      @-webkit-keyframes pacman-rotate-half-up {
        0%,
        100% {
          -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
        }
        50% {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @-moz-keyframes pacman-rotate-half-up {
        0%,
        100% {
          -moz-transform: rotate(270deg);
          transform: rotate(270deg);
        }
        50% {
          -moz-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @-o-keyframes pacman-rotate-half-up {
        0%,
        100% {
          -o-transform: rotate(270deg);
          transform: rotate(270deg);
        }
        50% {
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @keyframes pacman-rotate-half-up {
        0%,
        100% {
          -webkit-transform: rotate(270deg);
          -moz-transform: rotate(270deg);
          -o-transform: rotate(270deg);
          transform: rotate(270deg);
        }
        50% {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          transform: rotate(360deg);
        }
      }

      @-webkit-keyframes pacman-rotate-half-down {
        0%,
        100% {
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
        50% {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      }

      @-moz-keyframes pacman-rotate-half-down {
        0%,
        100% {
          -moz-transform: rotate(90deg);
          transform: rotate(90deg);
        }
        50% {
          -moz-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      }

      @-o-keyframes pacman-rotate-half-down {
        0%,
        100% {
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
        }
        50% {
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      }

      @keyframes pacman-rotate-half-down {
        0%,
        100% {
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
          -o-transform: rotate(90deg);
          transform: rotate(90deg);
        }
        50% {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          transform: rotate(0deg);
        }
      }

      @-webkit-keyframes pacman-balls {
        0% {
          left: 200%;
          opacity: 0;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        5% {
          opacity: 0.5;
        }
        66% {
          opacity: 1;
        }
        67% {
          opacity: 0;
        }
        100% {
          left: 0;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }

      @-moz-keyframes pacman-balls {
        0% {
          left: 200%;
          opacity: 0;
          -moz-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        5% {
          opacity: 0.5;
        }
        66% {
          opacity: 1;
        }
        67% {
          opacity: 0;
        }
        100% {
          left: 0;
          -moz-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }

      @-o-keyframes pacman-balls {
        0% {
          left: 200%;
          opacity: 0;
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        5% {
          opacity: 0.5;
        }
        66% {
          opacity: 1;
        }
        67% {
          opacity: 0;
        }
        100% {
          left: 0;
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }

      @keyframes pacman-balls {
        0% {
          left: 200%;
          opacity: 0;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }
        5% {
          opacity: 0.5;
        }
        66% {
          opacity: 1;
        }
        67% {
          opacity: 0;
        }
        100% {
          left: 0;
          -webkit-transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="loading">
        <div class="loader">
          <div class="loader-inner la-pacman la-2x">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
    <script type="module" src="/static/tinymce/tinymce.min.js"></script>
  </body>
</html>
